<!--  -->
<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item title="综合"
                         disabled />
      <van-dropdown-item title="价格"
                         v-model="priceValue"
                         :options="option1"
                         @change="priceChange" />
      <van-dropdown-item title="分类"
                         v-model="categoryVal"
                         :options="filterCategory"
                         @change="categoryChange" />
    </van-dropdown-menu>

    <van-empty v-if="goodsList.length==0"
               class="custom-image"
               image="https://cn.vuejs.org/images/logo.png"
               description="对不起，你搜索的商品不存在！" />
    <product v-else
             :goodsList="goodsList"></product>

  </div>
</template>

<script>
import Product from "@/components/Product.vue"
export default {
  data () {
    return {
      priceValue: "desc",
      categoryVal: 0,
      /* 
       checked: true
       id: 0
       name: "全部"
       当checked为true时，代表这个被勾选
       */
      option1: [
        { text: '价格从高到低', value: 'desc' },
        { text: '价格从低到高', value: 'asc' },

      ],
    }
  },
  components: {
    Product
  },
  props: {
    goodsList: {
      type: Array,
      default () {
        return [];
      }
    },
    filterCategory: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  methods: {
    /* 搜索分类改变 */
    categoryChange: function (val) {
      //console.log("val", val);
      /* 
      子传父：emit
      */
      this.$emit("categoryChange", val);
    },
    /* 分类价格改变排序 */
    priceChange (value) {
      //console.log('priceChange', value);
      this.$emit('priceChange', value);
    }
  },
  beforeUpdate () {
    /* 
    当checked的值为true时，将this.categoryVal设置为item.value,代表被勾选上
    */
    this.filterCategory.map((item) => {
      if (item.checked) {
        //console.log("item", item);
        this.categoryVal = item.value;
        return
      }
    })
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>